<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/frozen/frozen.min.css">
    <link rel="stylesheet" href="css/pSort_detail.css">
    <title>编辑</title>
</head>
<style>
    body{
        width:100%;
        height:100%;
        background:#fff;
        overflow:hidden;
    }
    *{
        margin:0;
        padding:0;
        list-style:none;
        text-decoration:none;
    }
    input,select{
        background:#fff;
    }

    /*.imgs{*/
    /*overflow-y:auto;*/
    /*}*/
    .file-box {
        display: inline-block;
        position: relative;
        float: left;
    }
    .file-box img {
        width:0.7rem;
        height:0.7rem;
    }
    #file {
        position: absolute;
        left: 0;
        top: 0;
        width:0.7rem;
        height:0.7rem;
        opacity: 0;
    }
    .auto_hidden {
        width:100%;
        position:absolute;
        display:none;
    }
    .auto_show {
        width:100%;
        height:1.4rem;
        background:#F4F8F9;
        overflow-y:auto;
        /*border:1px solid #000;*/
        font-size:0.22rem;
        line-height:0.18rem;
        /*color: #48A1FF;*/
        position:absolute;
        color:#000;
        /*z-index:9999; */
        /* 设置对象的层叠顺序 */

        display:block;

    }
    .auto_onmouseover{

        /*color:#ffffff;*/
        color: #48A1FF;
        /*background-color:highlight;*/
        background:#F4F8F9;
        width:100%;

    }
    .auto_onmouseout{

        /*color:#000000;*/
        /*color: #48A1FF;*/
        width:100%;
        background:#F4F8F9;
        margin-top:0.1rem;
    }
</style>
<script>
    window.onload = function(){
        /*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是
          为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
        getRem(375,100)
    };
    window.onresize = function(){
        getRem(375,100)
    };

    function getRem(pwidth,prem){
        var html = document.getElementsByTagName("html")[0];
        var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
        html.style.fontSize = oWidth/pwidth*prem + "px";
    }

</script>

<body>

<header style="width:100%;height:0.66rem;background:#48A1FF;border-top:1px solid #48a1ff;">
    <a href="list.html"><img src="img/left.png" alt="" style="width:0.09rem;height:0.16rem;float:left;display:block;margin-left:0.2rem;margin-top:0.25rem;"></a>
    <span style="display:block;width:1.61rem;height:0.28rem;margin-left:0.78rem;margin-top:0.19rem;float:left;color:#fff;font-family: PingFangSC-Medium;font-size:0.2rem;">ADDRESS INPUT</span>
    <img class="close" src="img/close.png" alt="" style="width:0.16rem;height:0.16rem;display:block;float:right;margin-right:0.34rem;margin-top:0.25rem;">
</header>

<content>
    <ul style="width:90%;height:0.4rem;margin:0 auto;">
        <li style="float:left;width:30%;height:0.4rem;font-family: PingFangSC-Light;font-size:0.14rem;
color:#969B9E;line-height:0.4rem;">Country</li>
        <li style="float:left;width:30%;height:0.4rem;font-family: PingFangSC-Light;font-size:0.14rem;
color:#969B9E;line-height:0.4rem;margin-left:5%;">State</li>
        <li style="float:left;width:30%;height:0.4rem;font-family: PingFangSC-Light;font-size:0.14rem;
color:#969B9E;line-height:0.4rem;margin-left:5%;">City</li>
    </ul>


    <ul style="width:90%;height:0.4rem;margin:0 auto;">
        <li style="float:left;width:30%;height:0.4rem;border-bottom:0.01rem solid #D8D8D8;">
            <select name="" id="country" style="display:block;width:100%;height:0.35rem;outline:none;border:none;font-size:0.16rem;">
                <option value="USA">USA</option>
            </select>

        </li>
        <li style="float:left;width:30%;height:0.4rem;margin-left:5%;border-bottom:0.01rem solid #D8D8D8;">
            <select name="" id="state" style="display:block;width:100%;height:0.35rem;outline:none;border:none;font-size:0.16rem;">
                <option value="CA">CA</option>
            </select>

        </li>
        <li style="float:left;width:30%;height:0.4rem;margin-left:5%;border-bottom:0.01rem solid #D8D8D8;">
            <select name="" id="city" style="display:block;width:100%;height:0.35rem;outline:none;border:none;font-size:0.16rem;">
                <option value="lrvine">lrvine</option>
            </select>

        </li>
    </ul>


    <div style="width:90%;height:1.2rem;margin:0 auto;margin-top:0.16rem;border-bottom:1px solid #d8d8d8;">
        <span style="display:block;font-family: PingFangSC-Light;font-size:0.14rem;color:#969B9E;">Address</span>
        <input type="text" style="display:block;width:100%;height:0.3rem;margin-top:0.1rem;font-size:0.16rem;outline:none;border:none;" class="address1">
        <div style="width:100%;height:0.01rem;margin:0 auto;background:#d8d8d8;"></div>
        <input type="text" style="display:block;width:100%;height:0.3rem;margin-top:0.29rem;font-size:0.16rem;outline:none;border:none;" class="address2">
    </div>

    <div style="width:90%;height:0.7rem;margin:0 auto;margin-top:0.16rem;border-bottom:1px solid #d8d8d8;">
        <span style="display:block;font-family: PingFangSC-Light;font-size:0.14rem;color:#969B9E;">Buliding Type</span>
        <select name="" id="buildingType" style="display:block;width:100%;height:0.3rem;margin-top:0.13rem;font-size:0.16rem;outline:none;border:none;">
            <option value="Community">Community</option>
        </select>
    </div>

    <div style="width:90%;height:0.7rem;margin:0 auto;margin-top:0.16rem;border-bottom:1px solid #d8d8d8;">
        <span style="display:block;font-family: PingFangSC-Light;font-size:0.14rem;color:#969B9E;">Zip Code</span>
        <input type="text" style="display:block;width:100%;height:0.3rem;margin-top:0.13rem;font-size:0.16rem;outline:none;border:none;" class="zipCode">
    </div>

    <div style="width:90%;height:0.7rem;margin:0 auto;margin-top:0.16rem;border-bottom:1px solid #d8d8d8;">
        <span style="display:block;font-family: PingFangSC-Light;font-size:0.14rem;color:#969B9E;">Company</span>
        <input type="text" style="display:block;width:100%;height:0.3rem;margin-top:0.18rem;font-size:0.16rem;outline:none;border:none;" class="company">
    </div>
</content>


<form class="lucky-form" id="form" action="" enctype="multipart/form-data" style="display:block;width:100%;min-height:1rem;height:auto;">

    <div class="imgs" style="margin-left:0.2rem;"></div>

    <div class="file-box">
        <input multiple="multiple" capture="camera" id="file" type="file"  accept="image/*"/>
        <img style="margin-left:0.15rem;" src="img/camara.png" alt=""/>
    </div>
</form>

<div style="width:100%;height:0.8rem;overflow:hidden;" class="save">
    <img src="img/confirm.png" style="display:block;float:left;margin-left:1.56rem;width:0.7rem;height:0.7rem;" alt="" class="confirm">

    <img src="img/locate sucess.png" style="display:block;float:left;margin-left:0.5rem;width:0.4rem;height:0.4rem;margin-top:0.2rem;" alt="" class="locatepng">
</div>

<div id="shade" style="width:100%;height:7.07rem;background:#757575;opacity:0.9;position:absolute;z-index:100;left:0;top:0;display:none;"></div>

<div id="delete" style="width:3.35rem;height:2.29rem;background:#F4F8F9;border-radius:8px;position:absolute;left:50%;margin-left:-1.675rem;top:50%;margin-top:-1.145rem;z-index:200;display:none;">
<img src="img/delete2.png" alt="" style="width:0.14rem;height:0.14rem;margin-left:3.1rem;display:block;margin-top:0.1rem;" class="delete">
<span style="width:100%;display:block;text-align:center;height:0.2rem;margin-top:0.3rem;font-family: PingFangSC-Medium;
font-size:0.14rem;
color: #6A6C6D;">Are you sure to delete?</span>
<div style="position:relative;">
<img src="img/delete1.png" alt="" style="width:2.74rem;height:0.43rem;margin:0 auto;display:block;margin-top:0.32rem;">
<span style="position:absolute;width:100%;height:0.4rem;font-family: PingFangSC-Medium;
font-size:0.18rem;
color: #FFFFFF;left:0;top:0;text-align:center;line-height:0.4rem;" class="Delete">Delete</span>
</div>

    <div style="width:2.74rem;height:0.01rem;background:#d8d8d8;margin:0 auto;margin-top:0.24rem;"></div>
<span style="font-family: PingFangSC-Medium;
font-size: 18px;
color: #757575;
width:100%;
height:0.43rem;
text-align:center;display:block;margin-top:0.14rem;" class="Cancel">Cancel</span>


</div>

<input type="hidden" id="addressId">
<input type="hidden" id="locationId">
<script src="jquery-1.8.3.min.js"></script>
<script src="js/commonscript.js"></script>
<script>
        $('.close').on('click',function() {
            $('#shade').css("display", "block");
            $('#delete').css("display", "block");

            $('.delete').on('click', function () {
                $('#shade').css("display", "none");
                $('#delete').css("display", "none");
            });

            $('.Cancel').on('click', function () {
                $('#shade').css("display", "none");
                $('#delete').css("display", "none");
            });



            //  阻止滚动行为
            document.addEventListener('touchmove', stopTouchMove, false);

            function stopTouchMove(e) {
                e.preventDefault();
            }

        });

        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return decodeURI(r[2]); return null;
        }

        var id=getQueryString('id');
        //        alert(id);
        //       页面展示
        $.ajax({
            url:url+'/address/selectById',
            type:'post',
            data:{addressId:id,token:localStorage.token},
            success:function(result){
                var data=result.data;
                var wrap = document.querySelector('.imgs');

                $('#country option:selected').text(data.country);
                $('#state option:selected').text(data.state);
                $('#city option:selected').text(data.city);
                $('.address1').val(data.address);
                $('.address2').val(data.doorNum);
                $('#buildingType option:selected').val(data.buildingType);
                $('.zipCode').val(data.zipCode);
                $('.company').val(data.company);
                $('#addressId').val(data.addressId);
                $('#locationId').val(data.locationId);

                var pic=data.picture;
                if(pic==''){
                    $(img).css('display','none');
                }
                else{
                    var picture=pic.split('&&&');
                    for(var i=0;i<picture.length;i++){
                    var div1 = document.createElement('div');
                    var img = document.createElement('img');
                    var close = document.createElement('img');

                    $(img).attr('src',picture[i]);
                    div1.className = "one_img";
                    close.className = 'del_img';
                    close.src = "img/delete.png" ;
                    close.style.width='0.14rem';
                    close.style.height='0.14rem';

                    close.addEventListener('click',function(){
                        var a = this;
//						alertConfirm('确定要删除图片吗','云生活提示',function(){
                        wrap.removeChild(a.parentNode);
//						    btnBox.style.display = "block" ;
//						})
                    });

                    div1.appendChild(img);
                    div1.appendChild(close);
                    wrap.appendChild(div1);
                }

                }

            }
        });



        var files = [];        //存 multi files
        var filesmap = {};     //存文件名称
        window.addEventListener('load',function(){
            var btn = document.querySelector('#file');                   // 上传按钮

            var wrap   = document.querySelector('.imgs');                  // 图片容器

            // 绑定触发事件
            btn.addEventListener('change',function(){
                console.log("addUpload");
                var file = btn.files;

                for( var i = 0 ; i<file.length;i++ ){
                    //去重复
                    console.log(file[i].name);
                    var filename = filesmap[file[i].name];
                    console.log(filename);
                    if ($.trim(filename) == ''){

                        filesmap[file[i].name] = file[i].name;
                        files.push(file[i]);

                    }else {
                        continue;
                    }

                    // 创建元素

                    var div1 = document.createElement('div');
                    var img = document.createElement('img');
                    var close = document.createElement('img');
                    div1.className = "two_img";
                    close.className = 'del_img';
                    close.src = "img/delete.png" ;
                    close.style.width='0.14rem';
                    close.style.height='0.14rem';
                    var reader = new FileReader();
                    reader.onload = (function(aImg){
                        return function(e){
                            aImg.src = e.target.result;
                        };
                    })(img);
                    reader.readAsDataURL(file[i]);

                    // 绑定关闭图片事件
                    close.addEventListener('click',function(){
                        var a = this ;
//						alertConfirm('确定要删除图片吗','云生活提示',function(){
                        wrap.removeChild(a.parentNode);
//						    btnBox.style.display = "block" ;
//						})
                        //删除重复
                        var index =  $(a).parents("one_img").index();
                        files.splice(index-1, 1);
                        file.splice(index-1, 1);
                    });

                    // 完成结构嵌套并添加至文档中
                    div1.appendChild(img);
                    div1.appendChild(close);
                    wrap.appendChild(div1);

                    // 释放空间
                    div1 = null ;
                    img = null ;
                    close = null ;
                }
            });



            // 监听 DOM 结构变化事件
            wrap.addEventListener('DOMSubtreeModified',function(){
                var length = document.querySelectorAll('.one_img').length;
//                document.querySelector('.zhangshu').textContent = length;
                // 判断图片个数  等于4张时隐藏
//                var length = document.querySelectorAll('.one_img').length;
//            if ( length == 4 ) {
//                btnBox.style.display = 'none';
//            }
            });
        });







        var src='';
        $('.confirm').on('click',function(){

            for(var j=0;j<$('.one_img').length;j++){
                  if(src.length>0){
                      src+="&&&";
                  }
                  src+=$('.one_img img:nth-child(1)').eq(j).attr('src');
            }


            if($('.address1').val()==''){
                $('#addresshade').css('display','block');
                setTimeout(function(){
                    $('#addresshade').css('display','none');
                },1000);
            }
            else if($('.zipCode').val()==''){
                $('#zipshade').css('display','block');
                setTimeout(function(){
                    $('#zipshade').css('display','none');
                },1000);
            }
            else if($('.company').val()==''){
                $('#companyshade').css('display','block');
                setTimeout(function(){
                    $('#companyshade').css('display','none');
                },1000);
            }
            else{

                var formdata = new FormData();
                formdata.append("createUser", localStorage.tel);

                formdata.append("address", $('.address1').val());
                formdata.append("token",   localStorage.token);
                formdata.append("doorNum", $('.address2').val());
                formdata.append("addressId", $('#addressId').val());
                formdata.append("locationId", $('#locationId').val());
                formdata.append("company", $('.company').val());
                formdata.append("zipCode", $('.zipCode').val());
                formdata.append("buildingType", $('#buildingType option,selected').val());
                formdata.append("lng", localStorage.lng);
                formdata.append("lat", localStorage.lat);
                formdata.append("country", $('#country option,selected').val());
                formdata.append("state", $('#state option,selected').val());
                formdata.append("city", $('#city option:selected').val());
                formdata.append("picture", src);
//                formdata.append("picture", $('#city option:selected').val());
//                $("#file").each(function (){
//                    formdata.append("file", this.files[0]);
////                    formdata.append("file", this.files[0]);
//                });

                var length = files.length;
                console.log(length);
                console.log(files);
                for(var i =0; i <length ; i++){
                    formdata.append("files",files[i]);
                }
                $.ajax({
                    url:url+'/address/save',
                    type:'post',
                    data: formdata,
                    dataType:"json",
                    contentType:false,
                    processData:false,
                    cache :false,
                    success:function(result){
                        if(result.state==0){
                            window.location.href='list.html';
                        }
                    }
                });

            }
        });















$('.Delete').on('click',function(){
    $.ajax({
        url:url+'/address/deleteById',
        type:'post',
        data:{addressId:id,token:localStorage.token},
        success:function(result){
           if(result.state==0){
               window.location.href='list.html';
           }
        }
    })

//window.location.href='list.html';


})






</script>
</body>
</html>